<template>
  <div id="auth">
    <div class="auth-main">
      <div class="title">
        <HomeTitle title="权限管理" Eng="Auth Roles" />
      </div>
      <div class="content">
        <myLoading v-if="loading" />
        <el-table v-else :data="auth.tableData" style="width: 100%" header-cell-class-name="tableColor" cell-class-name="tableColor">
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column
            label="角色类型"
            prop="RoleName"
            min-width="180"
          ></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template #default="s">
              <el-button type="text" @click="toAuth(s.row)">权限分配</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog v-model="auth.showAuth" title="权限分配" width="30%" draggable>
      <el-tree
        :data="role.allList"
        ref="treeRef"
        node-key="MenuID"
        @check="getChecked"
        :default-checked-keys="role.roleList"
        :props="role.props"
        show-checkbox
      ></el-tree>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auth.showAuth = false">取消</el-button>
          <el-button :loading="role.loading" type="primary" @click="submit()"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRaw,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import HomeTitle from "@/components/title.vue";
import * as RoleApi from "@/api/role";
import { ElNotification } from "element-plus";
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const { proxy } = getCurrentInstance();
    const auth = reactive({
      showAuth: false,
      tableData: [
        { RoleName: "个人账号", RoleType: 0 },
        { RoleName: "科室账号", RoleType: 1 },
        { RoleName: "局领导", RoleType: 2 },
        { RoleName: "系统管理员", RoleType: 3 },
        { RoleName: "审核员", RoleType: 4 },
      ],
    });
    const role = reactive({
      allList: [],
      roleList: [],
      loading: false,
      props: {
        label: "MenuName",
        children: "secondmenulist",
        id: "MenuID",
      },
      choseList: [],
      current: "",
      ref: [],
    });
    const toAuth = async (v) => {
      role.current = v;
      // proxy.$refs.treeRef
      if (proxy.$refs.treeRef) {
        proxy.$refs.treeRef.setCheckedNodes([], false);
      }
      let { data } = await RoleApi.getRoleList({ RoleType: v.RoleType });
      role.roleList = data.UserData.MenuIDs;
      auth.showAuth = true;
      // console.log(proxy.$refs.treeRef.setCheckedNodes(false,false))
    };
    const getAll = async () => {
      let { data } = await RoleApi.getAllList();
      role.allList = data.UserData;
    };
    onMounted(() => {
      getAll();
    });
    const getChecked = (a, b) => {
      role.choseList = [
        ...b.checkedNodes.map((v)=>v.MenuID),
        ...b.halfCheckedNodes.map((v)=>v.MenuID),
      ];
    };
    const submit = async () => {
      role.loading = true;
      console.log(role.choseList);
      let { data } = await RoleApi.save({
        RoleType: role.current.RoleType,
        MenuIDs: role.choseList.join(','),
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "success",
        title: "权限分配",
        message: "操作成功!",
      });
      role.loading = false;
      auth.showAuth = false;
    };
    return {
      auth,
      toAuth,
      role,
      getChecked,
      submit,
    };
  },
};
</script>

<style scoped lang="scss">
::v-deep(.el-dialog) {
  background: #2f3042 !important;
  color: #fff !important;
}
::v-deep(.el-tree) {
  background: #2f3042 !important;
  color: #ccc !important;
}
::v-deep(.el-tree-node__content:hover) {
  background: #414255 !important;
  color: #fff !important;
}

::v-deep(.el-dialog__title) {
  color: #fff !important;
}
::v-deep(.el-table) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table tr) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table__cell) {
  background: transparent !important;
  color: #fff !important;
}
#auth {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .auth-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    .auth-main__col {
      display: flex;
      width: 100%;
      gap: 40px;
      margin-bottom: 40px;
    }
  }
}
</style>
